<template>
  <div class="app-container">
    <div class="container">
      <!--      标题-->
      <el-row>
        <el-col :span="24" :xs="24">
          <div class="title">现场设备<i class="el-icon-caret-right"></i>设备列表</div>
        </el-col>
      </el-row>
      <!-- 搜索 -->
      <el-row style="margin-left: 20px;">
        <el-col :span="22" :xs="24">
          <Search
              :search-data="searchData"
              :search-params="queryParams"
              @change="searchParamsUpdate"
          >
          </Search>
        </el-col>
        <el-col :span="2" :xs="24">
          <el-button
              style="border: 1px solid rgba(0,231,231,0.4);background: rgba(0,231,231,0.051);color: #ffffff;"
              size="mini"
              @click="dialogFormVisible = true"
          >图标说明</el-button>
        </el-col>
      </el-row>
      <!--      表格-->
      <div style="width: 100%;margin-left: 15px;">
        <div style="display: flex;flex-wrap: wrap;">
          <div  v-for="(arr,i) in tableData" :key="i" style="font-size: 14px;border-radius: 3px;background: #0C323A;margin-right:10px;margin-bottom: 10px;width: 243px;color: #FFFFFF;padding: 10px;">
            <div style="border-bottom: 1px solid #999999;line-height:30px;">
              <div>{{arr.deviceName}}</div>
            </div>
            <div style="margin: 8px 0;display: flex;align-items: center;">
              <img style="width: 50px;height: 50px;margin-right: 20px;"
                   :src="arr.deviceType == 1 ? require('../../../assets/second/beng.png'):arr.deviceType == 2 ? require('../../../assets/second/shuiwei.png'):arr.deviceType == 3 ? require('../../../assets/second/dianbiao.png'):arr.deviceType == 4 ? require('../../../assets/second/yalibiao.png'):arr.deviceType == 5 ? require('../../../assets/second/liuliang.png'):arr.deviceType == 6 ? require('../../../assets/second/diancifa.png'):require('../../../assets/second/dianneng.png')" alt="">
              <div>
                <div v-for="(item,index) in arr.dataList" :key="index" style="display: flex;justify-content: space-between;align-items: center;">
                  <div>{{item.channel}}&nbsp;&nbsp;{{item.value}}{{item.unit}}</div>
                  <div :class="[item.alarmType != null ? 'status1' :'status0']" style="width: 10px;height: 10px;border-radius: 50%;margin-left: 20px;"></div>
                </div>
              </div>
            </div>
            <div style="border-top: 1px solid #999999;padding-top:8px;display: flex;justify-content: space-between;align-items: center;">
              <div>{{arr.updateTime}}</div>
              <el-button size="mini" style="background: #006675;color: white;border: none;" @click="ActualDetails(arr)">详情</el-button>
            </div>
          </div>
        </div>
      </div>
      <!--    分页-->
      <el-row>
        <el-col :span="24" :xs="24">
          <pagination
              v-show="total>0"
              :total="total"
              :page.sync="queryParams.page"
              :limit.sync="queryParams.limit"
          />
        </el-col>
      </el-row>
<!--      图标说明-->
      <div class="add">
        <el-dialog title="图标说明" :visible.sync="dialogFormVisible" width="400px">
          <div>
            <div class="icons">
              <img class="icons_img" src="../../../assets/second/beng.png">
              <div class="icons_name">泵</div>
            </div>
            <div class="icons">
              <img class="icons_img" src="../../../assets/second/shuiwei.png">
              <div class="icons_name">水池</div>
            </div>
            <div class="icons">
              <img class="icons_img" src="../../../assets/second/dianbiao.png">
              <div class="icons_name">电表</div>
            </div>
            <div class="icons">
              <img class="icons_img" src="../../../assets/second/yalibiao.png">
              <div class="icons_name">压力表</div>
            </div>
            <div class="icons">
              <img class="icons_img" src="../../../assets/second/liuliang.png">
              <div class="icons_name">流量计</div>
            </div>
            <div class="icons">
              <img class="icons_img" src="../../../assets/second/diancifa.png">
              <div class="icons_name">阀门</div>
            </div>
            <div class="icons">
              <img class="icons_img" src="../../../assets/second/dianneng.png">
              <div class="icons_name">电能</div>
            </div>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import { getSiteByPage, getIndustryDevicePage } from '@/api/automation'
import Search from '@/components/PageSearch'
import Pagination from "@/components/Pagination"
export default {
  name: "scenelists",
  components: { Search, Pagination },
  data() {
    return {
      // 搜索
      searchData: [
        {
          type: 'select',
          label: '站点',
          prop: 'siteId',
          options: [],
          placeholder: '请选择站点筛选'
        },
        {
          type: 'input',
          label: '设备名称',
          prop: 'deviceName',
          placeholder: '请输入设备名称筛选'
        },
        {
          type: 'input',
          label: '设备编号',
          prop: 'deviceNumber',
          placeholder: '请输入设备编号筛选'
        },
        {
          type: 'select',
          label: '设备类型',
          prop: 'deviceType',
          options: require('@/utils/data.json').secondDev,
          placeholder: '请选择设备类型筛选'
        }
      ],
      // 分页总条数
      total: 0,
      // 查询参数
      queryParams: {
        page: 1,
        limit: 20,
        siteId: '',
        deviceType: '',
        deviceName: '',
        deviceNumber: ''
      },
      // 表格
      tableData: [],
      // 站点下拉框
      siteOption:[],
      // 图标说明弹框
      dialogFormVisible: false,
    }
  },
  props: {},
  watch: {
    siteOption: {
      handler(val) {
        this.searchData[0].options = this.siteOption
      },
      immediate: true
    },
  },
  created() {
    this.getSiteOption()
    this.getList()
  },
  mounted() {
  },
  methods: {
    //站点下拉
    getSiteOption() {
      const data = {
        limit: 500,
        page: 1
      }
      getSiteByPage(data).then(res => {
        const data = res.data
        this.siteOption = data.map(item => {
          return {
            value: item.id,
            label: item.name
          }
        })
      }).catch(err => {
        console.log(err)
      })
    },
    getList() {
      getIndustryDevicePage(this.queryParams).then((res) => {
        console.log(res)
        this.total = res.dataCounts
        this.tableData = res.data || []
      }).catch((err) => {
        console.log(err)
        // this.$message.error(err.errorMsg)
      })
    },
    // 新的搜索内容
    searchParamsUpdate() {
      this.getList()
    },
  //  详情
    ActualDetails(item){
      console.log(item)
      this.$router.push({
        path: './sceneactual',
        query: {
          siteId: item.siteId,
          deviceName: item.deviceName
        }
      })
    }
  }
}
</script>

<style lang='less' scoped>
.app-container {
  width: 100%;
  min-height: 100%;
  box-sizing: border-box;
  background: #0C323A;
  .container {
    width: 100%;
    height: 100%;
    background: #002127;
    border-radius: 10px;
    .title {
      height: 42px;
      line-height: 42px;
      border-bottom: 1px solid #999999;
      color: #ffffff;
      font-size: 14px;
      margin-bottom: 15px;
      padding-left: 20px;
      margin-top: 10px;
    }
  }
}
.status0 {
  background:#0C323A;
}
.status1 {
  background:#FF1818;
}
.add {
  ::v-deep(.el-dialog) {
    background: rgba(4, 28, 33, 0.8);
    box-shadow: 0px 0px 20px 0px rgba(0, 231, 231, 0.5);
    border-radius: 20px;
    border: 1px solid rgba(0, 231, 231, 0.698);
  }
  .icons{
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 10px;
    .icons_img{
      width: 30px;
      height: 30px;
    }
    .icons_name {
      width: 100px;
      font-size: 18px;
    }
  }
}
</style>
